<template>
    <slot v-if="hasValidSlot" :label="text" />
    <template v-else>
        {{ text }}
    </template>
</template>


<script setup>
import { computed, useSlots } from 'vue'

const props = defineProps({
    label: [String, Number, Object],
    render: {
        type: [Function, String, Number],
        default: '-'
    }
})

const slots = useSlots()

const text = computed(() => {
    const isRenderFn = typeof props.render === 'function'
    const isEmptyLabel =
        (props.label === null || props.label === undefined) ||
        (typeof props.label === 'string' && props.label.trim() === '') ||
        props.label === 'null' ||
        props.label === 'undefined'

    if (isEmptyLabel) {
        return isRenderFn ? props.render('') : props.render
    }

    return isRenderFn ? props.render(props.label) : props.label
})

const hasValidSlot = computed(() => {
    return slots.default && slots.default().length > 0
})
</script>
